﻿var imageManipulator = undefined;
var math = mathjs();

function loadPredefinedImage(src) {
    var image = new Image();
    image.src = src;
	image.onload = function() {
	    var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = image.width;
		canvas.height = image.height;
		ctx.drawImage(image, 0, 0);
		loadImage(canvas.toDataURL());
		imageManipulator.filename = src;
	}
}

function loadImage(data) {
    $('#image').attr('src', data);
    imageManipulator.setImage(data);
    clearValues();
}

function setSlidersToMax() {
    $("#R_range").prop('value', 100);
    $("#G_range").prop('value', 100);
    $("#B_range").prop('value', 100);
}

function clearFormula() {
    $('#formula').val("");
    $('#formulasSelect').val("");
}

function clearValues() {
    $('#modesList').val('rgb');
    clearFormula();
    setSlidersToMax();
    $("#R_range").prop('disabled', false);
    $("#G_range").prop('disabled', false);
    $("#B_range").prop('disabled', false);
}

function multiplyRgb() {
    var R = $("#R_range").val() / 100;
    var G = $("#G_range").val() / 100;
    var B = $("#B_range").val() / 100;
    if (imageManipulator !== undefined) {
        imageManipulator.multiplyRGBValues(R, G, B);
        kanwa.getContext('2d').drawImage(imageManipulator.getCanvas(), 0, 0, imageManipulator.scaledImageSize.width, imageManipulator.scaledImageSize.height);
    }
    clearFormula();
}

$(function () {
    $("#tabs").tabs();
	$('#imageInput').change(function(ev) {
		var f = ev.target.files[0];
		var fr = new FileReader();
		
		fr.onload = function(e) {
		    loadImage(e.target.result);
		    imageManipulator.filename = $('input[type=file]').val();
		};
		
		fr.readAsDataURL(f);
	});

	var kanwa = document.getElementById('kanwa');
	imageManipulator = new ImageManipulator($('#imageDiv').width(), $('#imageDiv').height());
	imageManipulator.imageLoaded = function () {
	    kanwa.width = imageManipulator.getCanvas().width;
	    kanwa.height = imageManipulator.getCanvas().height;
	    kanwa.getContext('2d').drawImage(imageManipulator.getCanvas(), 0, 0);
	    // change image size to fit to div
	    $('#image').attr('width', imageManipulator.scaledImageSize.width);
	    $('#image').attr('height', imageManipulator.scaledImageSize.height);
	    $('#editors').show();
	    $('saveButton').show();
	    $('saveButtontemp').show();
	    // reset slider values
	    $("#R_range").val(100);
	    $("#G_range").val(100);
	    $("#B_range").val(100);
        // set active first tab
	    $("#tabs").tabs("option", "active", 0);
	};

    //zaladowanie przykladowego obrazka
	loadPredefinedImage("images/fish.jpg");

    // przesuwanie suwakami
	$("[type=range]").change(function () {
	    multiplyRgb();
	    clearFormula();
	});

    // zapisywanie obrazu do pliku
	$('#saveButton').click(function () {
	    imageManipulator.downloadImage($('input[type=file]').val());
	});

    // zapisywanie obrazu tymczasowego
	$('#saveButtonTemp').click(function () {
	    imageManipulator.saveTemporary();
	    clearValues();
	});

    // stworzenie listy formuł
	var s = $('<select id=\'formulasSelect\' />');
	for (var i = 0; i < FormulaList.length; i++) {
	    $('<option />', { value: FormulaList[i].value, text: FormulaList[i].name }).appendTo(s);
	}
	s.appendTo('#formulasList');
	$('#formulasSelect').change(function ()
	{
	    $('#formula').val($(this).val());
	});

	clearFormula();

    // obsluga transformacji obrazu
	$('#transformButton').click(function () {
	    if (imageManipulator !== undefined) {
	        $("body").addClass("loading");
	        setTimeout(function () {
	            imageManipulator.transformImage($('#formula').val());
	            kanwa.getContext('2d').drawImage(imageManipulator.getCanvas(), 0, 0, imageManipulator.scaledImageSize.width, imageManipulator.scaledImageSize.height);
	            $("body").removeClass("loading");
	        }, 100);
	        setSlidersToMax();
	    }
	});

    // inicjalizacja checkboxow i sliderow
	$('#R_checkbox').prop('checked', true);
	$('#G_checkbox').prop('checked', true);
	$('#B_checkbox').prop('checked', true);
	$("#R_range").prop('disabled', false);
	$("#G_range").prop('disabled', false);
	$("#B_range").prop('disabled', false);
	setSlidersToMax();


    // zmiana stanu checkboxow
	$('#R_checkbox').change(function () {
	    if ($(this).is(":checked")) {
	        $("#R_range").prop('disabled', false);
	        $("#R_range").prop('value', 100);
	        imageManipulator.rActive = true;
	    }
	    else {
	        $("#R_range").prop('disabled', true);
	        $("#R_range").prop('value', 0);
	        imageManipulator.rActive = false;
	    }
	    multiplyRgb();
	});

	$('#G_checkbox').change(function () {
	    if ($(this).is(":checked")) {
	        $("#G_range").prop('disabled', false);
	        $("#G_range").val(100);
	        imageManipulator.gActive = true;
	    }
	    else {
	        $("#G_range").prop('disabled', true);
	        $("#G_range").val(0);
	        imageManipulator.gActive = false;
	    }
	    multiplyRgb();
	});

	$('#B_checkbox').change(function () {
	    if ($(this).is(":checked")) {
	        $("#B_range").prop('disabled', false);
	        $("#B_range").val(100);
	        imageManipulator.bActive = true;
	    }
	    else {
	        $("#B_range").prop('disabled', true);
	        $("#B_range").val(0);
	        imageManipulator.bActive = false;
	    }
	    multiplyRgb();
	});

    // zmiana trybu
	$('#modesList').change(function () {
	    imageManipulator.mode = $(this).val();
	    multiplyRgb();
	});
});